<template>
    <div class="pla-set" id="pla-set">
        <div class="pla-set-interface" id="cityBox10">
            <div class="pla-set-interface-head">
                <div class="pla-set-interface-head-hPortrait">
                    <div class="bg-img">
                        <div>&#xe65a;
                            <input type='file'  id='imgBg' name="myfile"  title="修改背景图片"/>
                        </div>
                    </div>
                    <div class="user-nick"></div>
                    <div class="ph-img">
                        <input type='file' id='phBg' name="myfile" title="修改头像图片"/>
                    </div>
                </div>
                <ul class="pla-set-interface-head-set">
                    <li class="personal-center unified">
                        <ul>
                            <li class="li-mark1"><span>&#xe670;</span>个人中心</li>
                            <li class="barMove userCenter" @click="tops(1)"><span></span>个人信息</li>
                            <li class="barMove changePas" @click="tops(2)"><span></span>修改密码</li>
                        </ul>
                    </li>
                    <!--<li class="unified">-->
                        <!--<ul>-->
                            <!--<li class="li-mark1"><span>&#xe66d;</span>消息</li>-->
                        <!--</ul>-->
                    <!--</li>-->
                    <li class="unified" v-if="permissions[8].type||permissions[14].type">
                        <ul>
                            <li class="li-mark1"><span>&#xe66e;</span>数据设置</li>
                            <li class="barMove fltSet" v-if="permissions[8].type" @click="tops(3)"><span></span>关注航班配置</li>
                            <li class="barMove fltSet" @click="tops(4)" v-if="permissions[14].type"><span></span>自定义航线</li>
                        </ul>
                    </li>
                    <li class="unified"  v-if="permissions[9].type||permissions[10].type">
                        <ul>
                            <li class="li-mark1"><span>&#xe671;</span>权限设置</li>
                            <li v-if="permissions[9].type" @click="tops(5)"><span></span>成员管理</li>
                            <li v-if="permissions[10].type" @click="tops(6)"><span></span>角色管理</li>
                        </ul>
                    </li>
                    <li class="unified" v-if="permissions[11].type">
                        <ul>
                            <li class="li-mark1" @click="tops(7)"><span>&#xe6b7;</span>采集号配置信息</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="pla-set-interface-box" id="cityCont10">
                <!--个人中心-->
                <div class="personal-center" id="set_box1">
                    <div class="personal-center-title">
                        <h3>个人中心</h3>
                    </div>
                    <userInformation></userInformation>
                    <pwdChange></pwdChange>
                </div>
                <!--数据设置-->
                <dataSet v-if="permissions[8].type||permissions[14].type" id="set_box2"></dataSet>
                <!--成员管理-->
                <manage v-if="permissions[9].type||permissions[10].type" id="set_box3"></manage>
                <!--采集号配置-->
                <acquisition v-on:test_etermId="test_etermId" v-on:amend="amend" :up_date="add" v-if="permissions[11].type" id="set_box4"></acquisition>
                <div class="addBox" @click="addE" v-if="permissions[11].type">
                    <span></span>
                    <div>新增</div>
                </div>
            </div>
            <inspection v-on:insClear="insClear" :newData="data" v-if="test"></inspection>
            <addUser v-on:tip="tip" v-if="add" :cData="isChange"></addUser>
            <scrollBar10 :das="scrollNodeX" :reset="change"></scrollBar10>
        </div>
        <div class="modification-pro" id="modification-pro"></div>
    </div>
</template>
<script>
    import * as vx from 'vuex'

    import userInformation from '../template/settings/userCenter/userInformation.vue'
    import pwdChange from './../template/settings/pwdChange/changePwd.vue'
    import dataSet from '../template/settings/dataSet/dataSet.vue'
    import acquisition from './../template/settings/Acquisition/Acquisition.vue'
    import scrollBarX from '../component/scrollBarUltimate.vue'
    import inspection from './../template/settings/Acquisition/inspection.vue'
    import addUser from './../template/settings/Acquisition/addUser.vue'
    import manage from './../template/settings/permissions/manage.vue'
    export default{
        data(){
            return {
                change:false,
                scrollNodeX:{
                    parent:"cityBox10",
                    child:"cityCont10",
                    courseN:"course10",
                    sliderN:"slider10",
                    speed:60
                },
                test:false,
                data:'',
                add:false,
                isChange:''
            }
        },
        computed:{
            ...vx.mapGetters([
                'permissions'
            ])
        },
        mounted:function () {
            $(".unified").on("click",function(){
                if( $(this).css("overflow")=="hidden"){
                    $(this).css({"overflow":"visible","height":"auto"}).siblings().css({"overflow":"hidden","height":"30px"});
                }else if($(this).css("overflow")=="visible"){
                    $(this).css({"overflow":"hidden","height":"30px"});
                }
            });
            $(".unified>ul>li").on("click",function(event){
                if(!$(this).hasClass("li-mark1")){
                    $(".unified>ul>li>span").css("background-color","transparent");
                    $(this).children(0).css("background-color","#7dbce8");
                    event.stopPropagation();
                }else {
                    
                }
            });
        },
        components:{
            userInformation:userInformation,
            scrollBar10:scrollBarX,
            pwdChange:pwdChange,
            dataSet:dataSet,
            acquisition:acquisition,
            inspection:inspection,
            addUser:addUser,
            manage:manage
        },
        methods:{
            tops:function (val) {   //改变位置高度
                if(val==1){
                    $("#cityCont10").css('top','0px');
                }else if(val==2){
                    $("#cityCont10").css('top','-300px')
                }else if(val==3){
                    $("#cityCont10").css('top','-680px')
                }else if(val==4){
                    let top=parseInt($('#set_box1').outerHeight())+parseInt($('.data-set-concent').outerHeight())+parseInt($('.data-set-title').outerHeight());
                    $("#cityCont10").css('top',-top)
                }else if(val==5){
                    let top=parseInt($('#set_box1').outerHeight())+parseInt($('#set_box2').outerHeight());
                    $("#cityCont10").css('top',-top)
                }else if(val==6){
                    let top=parseInt($('#set_box1').outerHeight())+parseInt($('.manage_box').outerHeight())+parseInt($('#set_box2').outerHeight());
                    $("#cityCont10").css('top',-top)
                }else if(val==7){
                    let top=parseInt($('#set_box1').outerHeight())+parseInt($('#set_box3').outerHeight())+parseInt($('#set_box2').outerHeight());
                    $("#cityCont10").css('top',-top);
                }
                this.change=!this.change;
            },
            test_etermId:function (val) {
                this.test=true;
                $.ajax({
                    type:'get',
                    url:'/eterm_test',
                    data:{
                        id:val
                    },
                    dataType:'json',
                    success:(data)=>{
                        this.data = data;
                    }
                })
            },
            insClear:function () {
                this.test=false;
            },
            addE:function () {
                this.isChange='';
                this.add=true
            },
            tip:function (list) {
                if(list.isTrue){
                    document.getElementById('modification-pro').style.display='block';
                    document.getElementById('modification-pro').style.zIndex = 99;
                    document.getElementById('modification-pro').innerHTML=list.val;
                    document.getElementById('modification-pro').style.left=list.e.pageX+25+'px';
                    document.getElementById('modification-pro').style.top=list.e.pageY+'px';
                }else{
                    document.getElementById('modification-pro').style.display='none';
                }
                if(list.remove!=undefined&&list.remove){
                    this.add=false
                }
            },
            amend:function (val) {
                this.isChange=val;
                this.add=true;
            }
        }
    }
</script>
<style scoped>

</style>